<template>
    <div class="navList">
        <div class="userList">
            <!--查询条件-->
            <div class="header">
            </div>
            <!--表格-->
            <div class="body">
                <Table :columns="navListData"
                       :data="navList"
                       show-header
                       draggable
                       border
                       @on-drag-drop="dragOrder"
                       size="small">

                    <!--导航标题-->
                    <template slot-scope="{ row, index }" slot="title">
                        <span class="title" @click="goEdit(row.navCode)">{{row.navName}}</span>
                    </template>

                    <!--code-->
                    <template slot-scope="{ row, index }" slot="code">
                        {{row.navCode}}
                    </template>

                    <!--icon-->
                    <template slot-scope="{ row, index }" slot="icon">
                        {{row.navIcon}}
                    </template>

                    <!--url-->
                    <template slot-scope="{ row, index }" slot="url">
                        <a class="navUrl" :href="row.navUrl" target="_blank">
                            {{row.navUrl}}
                        </a>
                    </template>

                    <!--状态-->
                    <template slot-scope="{ row, index }" slot="status">
                        <!-- true-color="#13ce66" false-color="#ff4949" -->
                        <i-switch v-model="row.status"
                                  size="large"
                                  :true-value="1"
                                  :false-value="0"
                                  false-color="#ff4949"
                                  @on-change="changeStatus(row)">
                            <span slot="open">ON</span>
                            <span slot="close" style="font-size: 14px">OFF</span>
                        </i-switch>
                    </template>

                    <!--详情-->
                    <template slot-scope="{ row, index }" slot="details">
                        <Button size="small" type="success" @click="goDetails(row, index)">详情</Button>
                    </template>

                    <!--编辑-->
                    <template slot-scope="{ row, index }" slot="edit">
                        <Button size="small" type="info" @click="edit(row, index)">编辑</Button>
                    </template>

                    <!--排序-->
                    <template slot-scope="{ row, index }" slot="order">
                        <Button size="small" type="warning" @click="order(row, index)">排序</Button>
                    </template>

                    <!--删除-->
                    <template slot-scope="{ row, index }" slot="del">
                        <Button size="small" type="error" @click="del(row, index)">删除</Button>
                    </template>
                </Table>
            </div>
        </div>

        <!--详情面板-->
        <Modal v-model="navDetailsNavFlag"
               draggable>

            <p slot="header">
                <span style="color: #FF0000;font-size: 18px">导航详情</span>
            </p>

            <Row type="flex" justify="start" class="details">
                <Col span="4">
                导航标题 : </Col>

                <Col span="8">
                {{navInfo.navName}}
                </Col>
            </Row>

            <Row type="flex" justify="start" class="details">
                <Col span="4">
                导航图标 : </Col>

                <Col span="8">
                {{navInfo.navIcon}}
                </Col>
            </Row>

            <Row type="flex" justify="start" class="details">
                <Col span="4">
                指向链接 : </Col>

                <Col span="8">
                <div style="width:350px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis">
                    <a :href="navInfo.navUrl" target="_blank">{{navInfo.navUrl}}</a>
                </div>
                </Col>
            </Row>

            <Row type="flex" justify="start" class="details">
                <Col span="4">
                使用状态 : </Col>

                <Col span="8">
                <i-switch v-model="navInfo.status"
                          size="large"
                          disabled
                          :true-value="1"
                          :false-value="0">
                    <span slot="open">ON</span>
                    <span slot="close" style="font-size: 14px">OFF</span>
                </i-switch>
                </Col>
            </Row>
        </Modal>

        <!--更新面板-->
        <Modal v-model="updateNavFlag"
               draggable
               @on-ok="okUpdate">

            <p slot="header">
                <span style="color: #FF0000;font-size: 18px">编辑导航</span>
            </p>

            <Row type="flex" justify="start" class="update">
                <Col span="4" class="updateText">
                导航标题 : </Col>
                <Col span="8">
                <Input prefix="md-code-working"
                       v-model="navInfo.navName"
                       placeholder="导航标题"
                       style="width: 300px"
                       clearable/>
                </Col>
            </Row>

            <Row type="flex" justify="start" class="update">
                <Col span="4" class="updateText">
                导航图标 : </Col>
                <Col span="8">
                <Input prefix="ios-image"
                       v-model="navInfo.navIcon"
                       placeholder="导航图标"
                       style="width: 300px"
                       clearable/>
                </Col>
            </Row>

            <Row type="flex" justify="start" class="update">
                <Col span="4" class="updateText">
                指向链接 : </Col>
                <Col span="8">
                <Input prefix="ios-redo"
                       v-model="navInfo.navUrl"
                       placeholder="指向链接"
                       style="width: 300px"
                       clearable/>
                </Col>
            </Row>
        </Modal>

        <!--删除询问-->
        <Modal v-model="delNavFlag"
               draggable
               @on-ok="okDel"
               @on-cancel="cancelDel">

            <p slot="header">
                <span style="color: #FF0000;font-size: 18px">删除导航</span>
            </p>

            <p>
                确定删除导航
                <span style="color: #FF0000;font-size: 16px">{{navInfo.navName}}</span>
                吗?
            </p>
            <span style="color: #FF0000;font-size: 14px">【慎重删除，删除无法找回】</span>
        </Modal>


        <!--排序面板-->
        <Modal v-model="orderFlag"
               draggable
               @on-ok="okNavOrder">
            <p slot="header">
                <span style="color: #FF0000;font-size: 18px">导航排序</span>
            </p>

            将该导航
            <span style="color: #FF0000;font-size: 16px;margin: 0px 8px">{{navInfo.navName}} </span>
            放置序号为
            <InputNumber :max="navList.length"
                         :min="1"
                         style="width: 100px;margin: 0px 8px"
                         v-model="tmpIndex"></InputNumber>
            的导航前
        </Modal>
    </div>
</template>

<script>
    export default {
        name: "",
        components: {},
        props: {
            navListTmp: {
                type: Array
            }
        },
        data() {
            return {
                //单个对象
                navInfo: {
                    navId: "",
                    navName: "",
                    navCode: "",
                    navIcon: "",
                    navUrl: "",
                    status: "",
                    showOrder: ""
                },
                navList: this.navListTmp,
                navListOrder: [],
                row: {},
                index: "",
                navListData: [
                    {title: "序号", type: 'index', resizable: true, align: "center", width: 100},
                    {title: "导航标题", slot: 'title', resizable: true, align: "center", width: 180},
                    //{title: "code", slot: 'code', resizable: true, align: "center", width: 100},
                    //{title: "icon", slot: 'icon', resizable: true, align: "center", width: 100},
                    {title: "url", slot: 'url', resizable: true, ellipsis: true, align: "left"},
                    {title: "状态", slot: 'status', resizable: true, align: "center", width: 100},
                    {title: "详情", slot: 'details', resizable: true, align: "center", width: 100},
                    {title: "编辑", slot: 'edit', resizable: true, align: "center", width: 100},
                    {title: "排序", slot: 'order', resizable: true, align: "center", width: 100},
                    // {title: "删除", slot: 'del', resizable: true, align: "center", width: 100}
                ],
                //删除询问
                delNavFlag: false,
                //详情
                navDetailsNavFlag: false,
                //更新
                updateNavFlag: false,
                //排序
                orderFlag: false,
                //放置索引
                tmpIndex: 1
            }
        },
        methods: {
            //编辑
            goEdit: function (navCode) {
                this.$emit("nav-edit",navCode)
            },
            //改变状态
            changeStatus(row) {
                let data = {
                    status: row.status
                }
                this.axios.put(`/login/nav/nav/${row.navId}`, data)
                    .then((data) => {
                        this.$Message.info({
                            background: true,
                            closable: true,
                            content: '状态修改成功'
                        });
                        this.selectNavList()
                    })
            },
            //点击详情按钮
            goDetails: function (row, index) {
                this.navDetailsNavFlag = true
                this.navInfo = row
                this.index = index
            },
            //点击编辑按钮
            edit: function (row, index) {
                this.updateNavFlag = true
                this.navInfo = row
                this.index = index
            },
            //更新
            okUpdate: function () {
                let data = {
                    navName: this.navInfo.navName,
                    navIcon: this.navInfo.navIcon,
                    navUrl: this.navInfo.navUrl,
                }
                this.axios.put(`/login/nav/nav/${this.navInfo.navId}`, data)
                    .then((data) => {
                        this.$Message.info({
                            background: true,
                            closable: true,
                            duration: 2,
                            content: '导航编辑成功'
                        });
                    })
            },
            //点击排序按钮
            order: function (row, index) {
                this.orderFlag = true
                this.navInfo = row
                this.index = index
            },
            //排序
            okNavOrder: function () {
                let number = this.tmpIndex - this.index;
                if (number == 1 || number == 2) {
                    this.$Message.error({
                        background: true,
                        closable: true,
                        duration: 2,
                        content: '请勿将本条数据原地移动'
                    });
                    return
                }
                if (this.tmpIndex > this.index) {
                    this.tmpIndex--
                }
                let tmpNavList = this.navList;
                tmpNavList.delete(this.index)
                tmpNavList.insert(this.tmpIndex, this.navInfo)

                let ids = []
                for (let i = 0; i < this.navList.length; i++) {
                    ids.push(this.navList[i].navId)
                }
                this.axios.put(`/login/nav/order`, ids)
                    .then((data) => {
                        this.$Message.warning({
                            background: true,
                            closable: true,
                            duration: 2,
                            content: '导航排序成功'
                        });
                    })
            },
            //拖拽排序
            dragOrder: function (fromIndex, toIndex) {
                this.navInfo = this.navList[fromIndex];
                this.index = fromIndex;
                this.tmpIndex = toIndex + 1;
                this.okNavOrder()
            },
            //点击删除按钮
            del: function (row, index) {
                this.delNavFlag = true
                this.navInfo = row
                this.index = index
            },
            //删除询问
            okDel: function () {
                this.axios.delete(`/login/nav/nav/${this.navInfo.navId}`)
                    .then((resp) => {
                        this.selectNavList()
                        this.$Message.error({
                            background: true,
                            closable: true,
                            content: '删除成功'
                        });
                    })
            },
            cancelDel: function () {
            },
            //查询导航列表
            selectNavList: function () {
                this.axios.get(`/login/nav/navList`)
                    .then((data) => {
                        this.navList = data.data
                    })
            },
        },
        mounted() {
            this.selectNavList();
        }
    }
</script>

<style scoped>
    /*导航标题*/
    .title {
        display: block;
        height: 38px;
        line-height: 38px;
        margin: 0px -18px 0px -18px;
    }

    .details {
        height: 32px;
    }

    .update {
        height: 40px;
    }

    .updateText {
        font-size: 16px;
        line-height: 32px
    }
</style>